﻿@model  HomeCareLibrary.Models.OverviewModel
@if (Model != null)
{
    ViewBag.Title = "Overview";
    ViewBag.Description = Model.meta_description;
    ViewBag.Keywords = Model.meta_key;
}
<div class="col-lg-9 col-sm-9 right_part">
    <div class="title clearfix">
        <h1>Home Care Library</h1>
        <div class="head-searchbox">
            <button class="search_go" type="submit"></button>
            <input type="text" class="form-control" id="Search" placeholder="Search">
        </div>

        <div id="accordion" class="panel-group library-accordion">
            <div class="panel panel-default">
                <div class="panel-heading1">
                    <div id='flyout_menu'>
                        <h4 class="panel-title library ">
                            @Html.Action("menu", "Home")
                        </h4>
                    </div>
                </div>

            </div>

        </div>
    </div>
    @if (Model != null)
    {
        <h3 id="heading1" class="head-tittle">@Model.Feature_name</h3>
        
        <div class="media_tab">
            <ul class="nav nav-tabs" id="myTab">
                <li class="active"><a class="overview_icon ui-link aOverview" id="aOverview" data-name="@Model.Feature_name.Trim().Replace(" ", "-").ToLower()" href="javascript:void(0);"></a></li>
                <li><a class="routine_icon ui-link aCare" id="aCare" href="javascript:void(0);" data-name="@Model.Feature_name.Trim().Replace(" ", "-").ToLower()" data-task="@Model.rc_task_content.Trim().Replace(" ", "-").ToLower()"></a></li>
                <li><a class="q_a_icon ui-link aQuestions" href="javascript:void(0)" id="aQuestions"  data-name="@Model.Feature_name.Trim().Replace(" ", "-").ToLower()" data-task="@Model.qa_topic.Trim().Replace(" ", "-").ToLower()"></a></li>
                <li><a class="articles_icon ui-link aArticles" id="aArticles"  data-name="@Model.Feature_name.Trim().Replace(" ", "-").ToLower()" href="javascript:void(0)"></a></li>
            </ul>
        </div>
        
        <div class="main-content" id="myTabContent">
            <div class="main-content-inn">
                <div class="content-tab">

                    <div class="tab-content">

                        <div id="overview" class="tab-pane fade active in">

                            <div class="overview">

                                <div class="media_overview media_rc">
                                    @*@foreach (var item in Model.listOverView)
                                {
                        
                                    *@<div class="overview">
                                        <div class="row">
                                            <div class="col-md-6 col-sm-6">
                                                <h5>@Model.Feature_name</h5>
                                                <p>@Model.overview_content</p>
                                            </div>
                                            <div class="col-md-6 col-sm-6">
                                                <div class="right_over">
                                                    <div class="imgbox">
                                                        <img alt="@Model.overview_ImageURL" class="img-responsive" title="@Model.overview_ImageURL" src="@Url.Content("~/images/overview_img1.png")">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                    </div>

                                </div>
                                <div class="media_rc add_img text-center">
                                    <img src="@Url.Content("~/images/add_img1.png")" title="" alt="" class="img-responsive">
                                </div>

                            </div>
                        </div>
                    </div>

                </div>

            </div>

            <div class="bottom_main">
                <h4 id="heading2">@Model.Feature_name</h4>
                <div class="menu_link"><a data-name="@Model.Feature_name.Trim().Replace(" ", "-").ToLower()" href="javascript:void(0);" class="ui-link aOverview">Overview</a>|<a href="javascript:void(0)" data-name="@Model.Feature_name.Trim().Replace(" ", "-").ToLower()" data-task="@Model.rc_task_content.Trim().Replace(" ", "-").ToLower()" class="ui-link aCare">Routine Care</a>|<a href="javascript:void(0);" data-name="@Model.Feature_name.Trim().Replace(" ", "-").ToLower()" data-task="@Model.qa_topic.Trim().Replace(" ", "-").ToLower()" class="ui-link aQuestions">Q &amp; A</a>|<a data-name="@Model.Feature_name.Trim().Replace(" ", "-").ToLower()" href="javascript:void(0)" class="ui-link aArticles">Articles</a> </div>
            </div>
            <div class="title_btm">
                <h2>Home Care Library</h2>
                <div class="panel-title library ">
                    <div id='flyout_menu'>
                        <h4 class="panel-title library ">
                            @Html.Action("menu", "Home")
                        </h4>
                    </div>
                </div>
                <div class="head-searchbox">
                    <button type="submit" class="search_go"></button>
                    <input type="text" placeholder="Search" id="Search" class="form-control">
                </div>
            </div>
        </div>
    }
</div>
<script>
    $(".aOverview").live("click", function () {
        $("#wait").show();
        $("#myTab").show();
        $("#heading1").show();
        var ID = $(this).attr("data-name");
        var str = ID.replace(/\-/g, ' ').toLowerCase().replace(/\b[a-z]/g, function (letter) {
            return letter.toUpperCase();
        });
        $("#heading1").html(str);
        window.history.pushState("", "Title", "/" + ID + "/overview");
        document.title = "Overview";
        jQuery.ajax({
            url: "@Url.Action("overview", "Home")", type: "POST", traditional: true,
            data: { 'id': ID },
            success: function (data) {
                jQuery('#myTabContent').html('')
                jQuery("#myTabContent").html(data);
                $("#heading2").html(str);
                $("#wait").hide();
            }
        })
    });
    $(".aCare").live("click", function () {
        $("#wait").show();
        var ID = $(this).attr("data-name");
        var task = $(this).attr("data-task");
        var str = ID.replace(/\-/g, ' ').toLowerCase().replace(/\b[a-z]/g, function (letter) {
            return letter.toUpperCase();
        });
        $("#heading1").html(str);
        window.history.pushState("", "Title", "/" + ID + "/care/" + task);
        document.title = "Routine";
        jQuery.ajax({
            url: "@Url.Action("care", "Home")", type: "POST", traditional: true,
            data: { 'id': ID, 'featureID': task },
            success: function (data) {
                jQuery('#myTabContent').html('')
                jQuery("#myTabContent").html(data);
                $("#heading2").html(str);
                $("#wait").hide();
            }
        })
    });
    $(".care").live("click", function () {
        $("#wait").show();
        var ID = $(this).attr("data-name");
        var task = $(this).attr("data-task");
        var str = ID.replace(/\-/g, ' ').toLowerCase().replace(/\b[a-z]/g, function (letter) {
            return letter.toUpperCase();
        });
        $("#heading1").html(str);
        window.history.pushState("", "Title", "/" + ID + "/care/" + task);
        document.title = "Routine";
        jQuery.ajax({
            url: "@Url.Action("care", "Home")", type: "POST", traditional: true,
            data: { 'id': ID, 'featureID': task },
            success: function (data) {
                jQuery('#myTabContent').html('')
                jQuery("#myTabContent").html(data);
                $("#heading2").html(str);
                $("#wait").hide();
            }
        })
    });
    $(".aQuestions").live("click", function () {
        $("#wait").show();
        var ID = $(this).attr("data-name");
        var task = $(this).attr("data-task");
        var str = ID.replace(/\-/g, ' ').toLowerCase().replace(/\b[a-z]/g, function (letter) {
            return letter.toUpperCase();
        });
        $("#heading1").html(str);
        window.history.pushState("", "Title", "/" + ID + "/questions/" + task);
        document.title = "Questions";
        jQuery.ajax({
            url: "@Url.Action("questions", "Home")", type: "POST", traditional: true,
            data: { 'id': ID, 'featureID': task },
            success: function (data) {
                jQuery('#myTabContent').html('')
                jQuery("#myTabContent").html(data);
                $("#heading2").html(str);
                $("#wait").hide();
            }
        })
    });
    $(".questions").live("click", function () {
        $("#wait").show();
        var ID = $(this).attr("data-name");
        var task = $(this).attr("data-task");
        var str = ID.replace(/\-/g, ' ').toLowerCase().replace(/\b[a-z]/g, function (letter) {
            return letter.toUpperCase();
        });
        $("#heading1").html(str);
        window.history.pushState("", "Title", "/" + ID + "/questions/" + task);
        document.title = "Questions";
        jQuery.ajax({
            url: "@Url.Action("questions", "Home")", type: "POST", traditional: true,
            data: { 'id': ID, 'featureID': task },
            success: function (data) {
                jQuery('#myTabContent').html('')
                jQuery("#myTabContent").html(data);
                $("#heading2").html(str);
                $("#wait").hide();
            }
        })
    });
    $(".aArticles").live("click", function () {
        $("#wait").show();
        var ID = $(this).attr("data-name");
        var str = ID.replace(/\-/g, ' ').toLowerCase().replace(/\b[a-z]/g, function (letter) {
            return letter.toUpperCase();
        });
        $("#heading1").html(str);
        window.history.pushState("", "Title", "/" + ID + "/articles/");
        document.title = "Articles";
        jQuery.ajax({
            url: "@Url.Action("articles", "Home")", type: "POST", traditional: true,
            data: { 'id': ID },
            success: function (data) {
                jQuery('#myTabContent').html('')
                jQuery("#myTabContent").html(data);
                $("#heading2").html(str);
                $("#wait").hide();
            }
        })
    });
    $(".articles").live("click", function () {
        $("#wait").show();
        $("#myTab").hide();
        var ID = $(this).attr("data-name");
        var task = $(this).attr("data-task");
        var str = ID.replace(/\-/g, ' ').toLowerCase().replace(/\b[a-z]/g, function (letter) {
            return letter.toUpperCase();
        });
        $("#heading1").hide();
        window.history.pushState("", "Title", "/" + ID + "/articles/" + task);
        document.title = "Articles";
        jQuery.ajax({
            url: "@Url.Action("articles", "Home")", type: "POST", traditional: true,
            data: { 'id': ID, 'featureID': task },
            success: function (data) {
                jQuery('#myTabContent').html('')
                jQuery("#myTabContent").html(data);
                $("#heading2").html(str);
                $("#wait").hide();
                $("#myTab>li:first").addClass('active').siblings().removeClass('active')

            }
        })
    });

</script>
